<template>
  <div class="scope">
    <h3>作用域插槽</h3>
    <p>
      作用域插槽：就是可以传递数据的插槽，子组件可以将数据回传给父组件，由父组件决定这些回传的数据将以何种结构或者外观在子组件内部进行展示
    </p>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        <slot :$row="todo" :$index="index"></slot>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
defineProps(['todos'])
</script>

<style scoped>
.scope {
  width: 500px;
  height: 300px;
  margin-left: 90px;
  background: lightpink;
}
</style>
